<template>
  <div :class="['wn-index',loginState||detailState?'fixed':'']">
    <div class="header">
      <div class="slogan">
        <img src="../../../assets/images/jdj_index_tit.png" alt="slogan">
      </div>
    </div>
    <div class="main">
      <ul class="tabs">
        <div class="tab-tit">
          <img src="../../../assets/images/jdj_index_tab_tit.png">
        </div>
        <ul class="tab-menu">
          <li v-for="(item, index) in tabs" :key="index" @click="tabIndex=index">
            <i :style="{backgroundImage:'url(static/images/jdj_index_tab_icon_'+index+'.jpg)'}"></i>
            <h5 :class="[tabIndex===index?'act':'']">{{item.tit}}</h5>
          </li>
        </ul>
        <div
          class="tab-main"
          :style="{backgroundImage:'url(static/images/jdj_index_tab_bg_'+tabIndex+'.jpg)'}"
        >
          <h2>{{tabs[tabIndex].tit}}</h2>
          <ul>
            <li v-for="(item, index) in tabs[tabIndex].desc" :key="index">{{item}}</li>
          </ul>
          <div class="tab-button" @click="detail">
            <span>查看详情</span>
          </div>
        </div>
      </ul>
      <div class="panel">
        <li>
          <div class="icon">
            <img src="../../../assets/images/jdj_index_panel_icon_1.png">
          </div>
          <div class="desc">
            <h5 @click="download">下载
              <br>旺仔旺铺APP
            </h5>
            <p></p>
          </div>
        </li>
        <li @click="login">
          <div class="icon">
            <img src="../../../assets/images/jdj_index_panel_icon_2.png">
          </div>
          <div class="desc">
            <h5>邀请好友</h5>
            <p>已推荐{{inviteList.length}}位好友</p>
          </div>
        </li>
      </div>
    </div>
    <div class="footer">
      <div class="inner">
        <div class="title">
          <span>活动说明</span>
        </div>
        <ol class="content">
          <li v-for="(item, index) in instructions" :key="index">
            <span>{{item}}</span>
          </li>
        </ol>
      </div>
    </div>
    <login v-if="loginState"/>
    <div class="detail" v-show="detailState">
      <div class="detail-inner">
        <div
          class="detail-tit"
          :style="{backgroundImage:'url(static/images/jdj_index_tab_bg_'+tabIndex+'.jpg)'}"
        >
          <h2>{{tabs[tabIndex].tit}}</h2>
          <ul>
            <li v-for="(item, index) in tabs[tabIndex].desc" :key="index">{{item}}</li>
          </ul>
        </div>
        <div class="detail-content">
          <h5>权益说明</h5>
          <p
            :class="[tabIndex===3?'tri':'']"
            v-for="(item, index) in tabs[tabIndex].sub"
            :key="index"
          >{{item}}</p>
        </div>
      </div>
      <div class="back-button" @click="panelNav('back')">
        <span>返回首页</span>
      </div>
      <!-- <div class="button" @click="panelNav('back')">back</div> -->
      <!-- <div class="detail-panel">
        <div class="nav">
          <i class="act" @click="panelNav('back')"></i>
          <i @click="panelNav('go')"></i>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import store from "../../../store.js";
import login from "../login/index.vue";
export default {
  components: {
    login
  },
  data() {
    return {
      tableHeight: 300,
      detailState: false,
      inviteNumber: 0,
      instructions: [
        "成功报名此次金犊奖-旺仔旺铺特别营销项的参赛者，点击此页邀请好友的按钮，并用报名手机号登陆，即可激活CEO会员身份，并拥有10个邀请好友无门槛成为CEO会员的名额，额满即止。",
        "注：10个名额用完后，后续邀请的好友需购买礼包才可开通会员权益。机会难得，且邀且珍惜哦！"
      ],
      tabs: [
        {
          tit: "购物优惠",
          desc: [
            "自购商品可享返现，轻松赚回年费",
            "全场品项随心选，净省5%-30%",
            "买越多越划算"
          ],
          sub: [
            "CEO会员在会员有效期内均可享受购物优惠，不同品项优惠金额不等，确认收货后的7个工作日内，购物优惠所省金额将直接转入您的账号，您可在APP内查看和提取。"
          ]
        },
        {
          tit: "分享赚钱",
          desc: [
            "200+旺旺不同品项，随你一键分享",
            "成功推广，即可赚商品售价5%-30%不等的奖励金",
            "商品物流及售后均由旺旺负责"
          ],
          sub: [
            "CEO会员在会员有效期内可随时分享商城内的任意商品，只要用户通过您分享的链接完成购买并成功收货，您就能获得该商品售价5%-30%不等的奖励金。",
            "奖励金会在确认收货后的7个工作日内，直接转入您的账号，您可在APP内查看和提取。"
          ]
        },
        {
          tit: "低价箱购",
          desc: [
            "箱购专区6.5折起，1箱起购",
            "线下推广，最高可赚35%的奖励金",
            "商品物流及售后均由旺旺负责"
          ],
          sub: [
            "CEO会员在会员有效期内享有低价箱购专区内商品的购买资格。专享6.5折起的超低箱购价。",
            "线上完成下单，线下收货后推广，一箱最高可赚35%奖励金，均由会员直接所得。"
          ]
        },
        {
          tit: "邀请有奖",
          desc: [
            "邀请好友开通CEO会员，邀请越多，奖励越多",
            "好友推广成功的每笔订单，您可获订单总额 1%-3%的奖励金"
          ],
          sub: [
            "CEO会员在会员有效期内可邀请好友开通CEO会员权益，培养自己的团队，与好友一起赚钱。",
            "您直接邀请的好友完成的每笔推广订单，您都将获得订单总额3%的奖励金。同理，您邀请的好友也可继续邀请其他朋友成为CEO，您可获得好友邀请的其他朋友完成的推广订单总额1%的奖励金。",
            "奖励金会在确认收货后的7个工作日内，直接转入您的账号，您可在APP内查看和提取。"
          ]
        }
      ],
      tabIndex: 0
    };
  },
  computed: {
    loginState: {
      get() {
        return store.state.loginState;
      },
      set() {}
    },
    appId: {
      get() {
        return store.state.appId;
      }
    },
    inviteList: {
      get() {
        return store.state.inviteList;
      },
      set() {}
    },
    calfKey: {
      get() {
        return store.state.calfKey;
      },
      set() {}
    },
    system: {
      get() {
        return store.state.system;
      },
      set() {}
    },
    wxEnv: {
      get() {
        return store.state.wxEnv;
      },
      set() {}
    },
    lifeInfo: {
      get() {
        return store.state.lifeInfo;
      },
      set() {}
    },
    appStore: {
      get() {
        return store.state.appStore;
      },
      set() {}
    }
  },
  methods: {
    init() {
      document.querySelector(".slogan img").onload = () => {
        // let during = 10
        // if (this.system = 'ios') during = 300
        setTimeout(() => {
          store.commit("upload", { prope: "loaded", data: true });
        }, 700);
      };
    },
    login() {
      if (this.lifeInfo) {
        alert(this.lifeInfo);
        return;
      }
      if (!this.wxEnv) {
        alert("请在微信内打开");
        return;
      }
      if (this.calfKey) {
        store.commit("upload", { prope: "loginResult", data: true });
      } else {
        store.commit("upload", { prope: "loginState", data: true });
      }
    },
    download() {
      if (this.system != "ios") {
        window.location.href = this.appStore.android;
      } else {
        window.location.href = this.appStore.ios;
      }
      // alert("后端接口缺失");
    },
    detail() {
      this.detailState = true;
    },
    panelNav() {
      this.detailState = false;
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang='stylus' scoped>
@import '../../../assets/styles/index.styl'
.wn-index {
  width 100%
  background #fff
  overflow-x hidden
  position relative
  &.fixed {
    position fixed
  }
  .header {
    position relative
    z-index 1
    .slogan {
      text-align center
      img {
        width 100%
      }
    }
  }
  .main {
    position relative
    z-index 1
    margin 25px 0
    padding 0 15px
    .tabs {
      .tab-tit {
        img {
          width 40%
        }
      }
      .tab-menu {
        margin 20px 0
        text-align center
        li {
          margin-right 25px
          @media only screen and (max-width: 330px) {
            margin-right 15px
          }
          display inline-block
          text-align center
          &:last-child {
            margin-right 0
          }
          i {
            display block
            height 60px
            width 60px
            background-position center
            background-size contain
            background-repeat no-repeat
          }
          h5 {
            font-size 12px
            color #666
            position relative
            &.act {
              color c2
              &:before {
                content ''
                display inline-block
                position absolute
                bottom -20px
                left 50%
                transform translateX(-50%)
                height 0
                width 0
                border 10px solid transparent
                border-bottom-color c13
              }
            }
          }
        }
      }
      .tab-main {
        background c13
        border-radius 5px
        padding 15px
        padding-bottom 25px
        position relative
        color c14
        background-position right bottom
        background-size auto 100%
        background-repeat no-repeat
        h2 {
          font-size 24px
        }
        ul {
          margin 10px 0 20px
          padding-left 15px
          li {
            list-style-type disc
            margin-bottom 3px
          }
        }
        .tab-button {
          display inline-block
          color #fff
          background c15
          padding 5px 15px
          border-radius 20px
          font-size 14px
          &:after {
            content '>'
            display inline-block
            margin-left 3px
            opacity 0.7
          }
        }
      }
    }
    .panel {
      background-image linear-gradient(to right, #ffc18f, #f7768a)
      border-radius 5px
      margin 15px 0
      padding 25px 15px
      li {
        display inline-block
        border-right 1px solid #fdcdc6
        padding-right 15px
        width 45%
        box-sizing border-box
        overflow hidden
        &:last-child {
          width 50%
          border-right 0
          padding-right 0
          padding-left 25px
        }
        .icon {
          float left
          display inline-block
          width 30px
          margin-right 10px
          img {
            vertical-align top
          }
        }
        .desc {
          color #fff
          display inline-block
          white-space nowrap
          @media only screen and (max-width: 330px) {
            width 10px
            transform scale(0.8)
          }
          h5 {
            font-size 14px
            width 10px
          }
          p {
            width 10%
            font-size 12px
          }
        }
      }
    }
  }
  .footer {
    .inner {
      color #666
      padding 25px
      padding-top 5px
      .title {
        font-size 20px
        text-align center
        font-weight bold
        &:before, &:after {
          margin 0 10px
          content ''
          display inline-block
          width 30px
          height 10px
          background-image url('../../../assets/images/jdj_accept_footer_tit_dec_gradient.png')
          background-size contain
          background-repeat no-repeat
          background-position center
        }
        &:after {
          transform rotate(180deg)
        }
      }
      .content {
        // padding-left 15px
        margin-top 15px
        li {
          // list-style decimal
          font-size 12px
          margin-bottom 5px
        }
      }
    }
  }
  .detail {
    position absolute
    top 0
    left 0
    height 100vh
    width 100vw
    background #fff
    z-index 100
    -webkit-overflow-scrolling touch
    overflow auto
    margin-bottom 150px
    .detail-inner {
      padding 15px
      .detail-tit {
        background c13
        border-radius 5px
        padding 15px
        position relative
        color c14
        background-position right bottom
        background-size auto 100%
        background-repeat no-repeat
        h2 {
          font-size 24px
        }
        ul {
          margin 10px 0 20px
          padding-left 15px
          li {
            list-style-type disc
            margin-bottom 3px
          }
        }
        .tab-button {
          display inline-block
          color #fff
          background c15
          padding 5px 15px
          border-radius 20px
          font-size 14px
          &:after {
            content '>'
            display inline-block
            margin-left 3px
            opacity 0.7
          }
        }
      }
      .detail-content {
        margin-bottom 80px
        h5 {
          font-size 18px
          margin 15px 0 5px
        }
        p {
          font-size 14px
          margin 5px 0
          &.tri:nth-child(2) {
            &:after {
              content ''
              display block
              width 100%
              height 200px
              background-image url('../../../assets/images/jdj_index_detail_sub_img_3.png')
              background-size contain
              background-repeat no-repeat
              background-position center
              margin 10px 0
            }
          }
        }
      }
    }
    .back-button {
      display inline-block
      color #fff
      background c15
      padding 5px 15px
      margin-left 15px
      position relative
      top -60px
      border-radius 20px
      font-size 14px
      &:before {
        content '<'
        display inline-block
        margin-left 3px
        opacity 0.7
        position relative
        left -3px
      }
    }
    .detail-panel {
      background #fafafc
      border-top 1px solid #e8e8ea
      position fixed
      left 0
      bottom 0
      height 10%
      max-height 70px
      width 100%
      z-index 999
      text-align center
      .nav {
        display inline-block
        position relative
        width 30%
        top 40%
        transform translateY(-50%)
        overflow hidden
        i {
          display inline-block
          height 24px
          width 24px
          background-image url('../../../assets/images/arrow.svg')
          background-size contain
          background-repeat no-repeat
          background-position center
          content ''
          float left
          opacity 0.2
          cursor pointer
          &:last-child {
            float right
            transform rotate(180deg)
          }
          &.act {
            opacity 1
          }
        }
      }
    }
  }
}
</style>
